<template>
    <div class="login">
      <div class="toplogo">
        <img @click="goTo('/')" src="http://lixinghe.meimeng.eu.org/flower/image/logo%E9%80%8F%E6%98%8E.png" alt="">
      </div>
      <div class="login-content">
        <div class="login-primary">
          <!--账号登录部分-->
          <ul id="content-1">
            <li class="choice"><span class="qianti">亲爱的用户请</span>注册</li>
          </ul>
          <!--用户输入验证部分-->
          <div class="content-2">
            <el-form
                style="padding: 0 30px;position: relative"
                :model="form"
                :label-position="labelPosition"
                label-width="60px"
            >
              <el-form-item label="昵称:" style="margin-top: 20px;">
                <el-input
                    v-model="form.nickName"
                    type="text"
                    size="large"
                    placeholder="请输入昵称"
                />
              </el-form-item>
              <div class="yzinfo">您还没有输入信息</div>
              <el-form-item label="手机号:" style="margin-top: 20px;">
                <el-input
                    v-model="form.name"
                    type="text"
                    size="large"
                    placeholder="请输入账号"
                />
<!--                <div class="yzinfo">您还没有输入账号</div>-->
              </el-form-item>
              <div class="yzinfo">您还没有输入信息</div>
              <el-form-item label="验证码:" style="margin-top: 20px;">
                <el-input
                    v-model="form.vcode"
                    type="text"
                    size="large"
                    placeholder="请输入验证码"
                />
                <vc></vc>
              </el-form-item>
              <div class="yzinfo">您还没有输入信息</div>
              <el-form-item style="margin-top: 20px;" label="密码:">
                <el-input
                    v-model="form.password"
                    type="password"
                    size="large"
                    placeholder="请输入密码"
                    show-password
                />
<!--                <div class="yzinfo">您还没有输入密码</div>-->
              </el-form-item>
              <div class="yzinfo">您还没有输入信息</div>
              <el-form-item label="密码2:" style="margin-top: 20px;">
                <el-input
                    v-model="form.rePassword"
                    type="text"
                    size="large"
                    show-password
                    placeholder="请再次输入密码"
                />
              </el-form-item>
              <div class="yzinfo">您还没有输入信息</div>
              <el-form-item label="" style="margin-top: 10px">
                <el-checkbox
                    label="同意此协议"
                    v-model="isService"
                >
                </el-checkbox>
                <b @click="visible=!visible" style="color: orangered;cursor: pointer">《商城服务协议》</b>
              </el-form-item>
            </el-form>
            <el-dialog v-model="visible" :show-close="false">
              <template #header="{ close, titleId, titleClass }">
                <div class="my-header">
                  <h4 :id="titleId" :class="titleClass">《商城服务协议》</h4>
                  <el-button type="danger" @click="close" style="position: absolute;right: 10px;top: 10px;">
                    <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
                    关闭
                  </el-button>
                </div>
              </template>
              这是商城服务协议，你所................................
            </el-dialog>
            <button class="registerbtn" v-throttle @click="goRegister">注册</button>
          </div>
          <!--第三方登录-->
          <div class="content-3">
            <div style="width: 100px">
              <span class="el-icon-chat-dot-round"></span>微信
            </div>
            <div class="register">
              <a @click="goTo('/login')">已有账号？立即登录</a>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import {ref,reactive, toRefs} from "vue";
import router from "@/router";
import {ElMessage} from "element-plus";
import VerificationCode from "@/components/commons/VerificationCode"
export default {
  name: "Register",
  setup(){
    let data = reactive({
        form:{
          //账号
          name:'',
          //密码
          password:'',
          //再次输入密码
          rePassword:'',
          //昵称
          nickName:'',
          vcode:'',

        },
        //是否选中服务协议
        isService:false

    })
    const labelPosition = ref('left')
    const visible = ref(false)

    //路由跳转函数
    function goTo(path,params){
      router.push(path)
    }

    //注册前验证
    function goRegister(){
      if(!data.isService){
        ElMessage.warning('您还没有同意用户协议')
      }else {
        if(data.form.nickName == ''){
          ElMessage.error('昵称不能为空!')
        }else if(data.form.name == ''){
          ElMessage.error('手机号不能为空!')
        }else if(data.form.vcode == ''){
          ElMessage.error('还没有验证码')
        }else if(data.form.password == '' || data.form.rePassword == ''){
          ElMessage.error('密码不能为空')
        }else if(data.form.password !== data.form.rePassword){
          ElMessage.error('两次输入的密码不一致')
        }else {
          ElMessage.success('正在拉起网络')
        }
      }
    }

    return {
      ...toRefs(data),
      visible,
      labelPosition,
      goTo,
      goRegister
    }
  },
  components:{
    vc:VerificationCode
  }
}

</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
  cursor: pointer;
}
li {
  list-style-type: none;
}
.login {
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 700px;
  background: url("http://lixinghe.meimeng.eu.org/flower/image/rgbg.png");
  background-size:cover;
  flex-grow: 1;
  background-repeat: no-repeat;
  justify-content: center;
  .toplogo {
    width: 100%;
    top: 0px;
    background: antiquewhite;
    opacity: 0.7;
    position: fixed;
    img {
      cursor: pointer;
      width: 250px;
      height: 100px;
    }
  }
  .login-content {
    width: 1200px;
    height: 400px;
    margin: 0 auto;
    padding: 100px 0;
    align-items: center;
    display: flex;
    justify-content: center;
  }
  .login-primary {
    border-radius: 30px;
    width: 400px;
    background: #f9fafc;
    opacity: 0.8;
    text-align: center;
    border: 1px solid gainsboro;
    box-shadow: 0 4px 8px 0 rgba(0 ,0, 0,0.2), 0 6px 20px 0 rgba(0, 0, 0 , 0.2);
  }
}


#content-1 {
  border-radius: 30px;
  background-color: white;
  text-align: center;
  height: 52px;
  border-bottom: 1px solid red;
  line-height: 52px;
  border-bottom: 1px solid #E9ECF0;
  li{
    float: left;
    position: relative;
    width: 100%;
    font-size: 28px;
  }
}
.choice {
  color: orange;
}
.content-2 {
  background-color: white;
  margin-top: 40px;
  input{
    height: 98%;
    border: none;
    outline: none;
    width: 340px;
    margin-left: 57px;
  }
  input::-webkit-input-placeholder{
    color: #C0C4CC;
  }
  span {
    display: inline-block;
    font-size: 26px;
    position: absolute;
    top: 15px;
    left: 20px;
  }
  p{
    height: 40px;
    line-height: 40px;
    a {
      font-size: 14px;
      color: #C0C4CC;
    }
  }
}
.account {
  margin-top: 20px;
  position: relative;
  background-color: white;
  width: 99%;
  line-height: 58px;
  height: 58px;
  border: 1px solid #E9ECF0;
  .yzm{
    border: none;
    position: absolute;
    color: #F29BA5;
    top: 0px;
    right: -2px;
    height: 100%;
    width: 102px;
    cursor: pointer;
    background-color:#E9ECF0;
  }
}
.registerbtn {
  font-size: 18px;
  border: none;
  color: white;
  border-radius: 30px;
  width: 82%;
  height: 50px;
  background-color: #F29BA5;
  margin-top: 40px;
  cursor: pointer;
}
.content-3 {
  border-radius: 30px;
  position: relative;
  height: 50px;
  line-height: 50px;
  margin-top: 20px;
  background: #F7F9FA;
}
.register {
  cursor: pointer;
  position: absolute;
  top: 0;
  right: 10px;
  a {
    color: orange;
  }
}
.yzinfo {
  color: red;
  display: none;
  font-size: 12px;
  position: absolute;
  height: 20px;
}

</style>
